<!-- 注意：这里所有的变量都加了 todo. 前缀 -->
<li
    class="flex justify-between items-center bg-gray-100 p-3 rounded shadow mb-2"
    id="todo-{{ todo.id }}"
>
    <div
        class="flex items-center cursor-pointer"
        hx-put="/todos/{{ todo.id }}"
        hx-trigger="click"
        hx-target="#todo-{{ todo.id }}"
        hx-swap="outerHTML"
    >
        {% if todo.completed %}
        <span class="text-green-500 mr-2">✔</span>
        <span class="line-through text-gray-500">{{ todo.title }}</span>
        {% else %}
        <span class="text-gray-300 mr-2">☐</span>
        <span>{{ todo.title }}</span>
        {% endif %}
    </div>

    <button
        class="text-red-500 hover:text-red-700 font-bold"
        hx-delete="/todos/{{ todo.id }}"
        hx-target="#todo-{{ todo.id }}"
        hx-swap="outerHTML"
    >
        ×
    </button>
</li>
